<template>
<!-- Farms -->
  <div class="tp-body">
    <div class="JGame-Official-Channel">
      <!-- bannar -->
      <CRow >
        <CCol class="bannar-body" :sm="12" :lg="12">
          <div class="body-title">
            <h3>90,445</h3>
            <p>Total Supply</p>
          </div>
          <div class="body-title">
            <h3>90,565</h3>
            <p>Circulating Suppil</p>
          </div>
          <div class="body-title">
            <h3>90,565</h3>
            <p>Number Burned</p>
          </div>
        </CCol>
      </CRow>
      <CRow>
          <CCol v-for="item in groupItems" key="item"  :sm="5" :lg="3">
            <div class="group-item" :class="item.c">
              <div class="item-card ">
                <div class="item-card-img-body">
                  <img class="img" :src="cardImg" alt="">
                </div>
                <div class="item-title">
                  <strong>{{item.name}}</strong>
                </div>
              </div>
            </div>
          </CCol>
      </CRow>
    </div>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'
import { brandSet } from '@coreui/icons'
import  cardImg  from '@/assets/images/avatars/game.png'
export default {
  name: 'Dashboard',
  components: {
  },
  setup() {
    const groupItems =[];
    const colors = ['bg-red',
    'bg-h',
    'bg-z',
    'bg-l',
    'bg-z',
    'bg-red',
    'bg-h',
    'bg-l'
    ]
    for (let i = 0; i < 8; i++) {
      groupItems.push({
        name:'Miner',
        c:colors[i]
      })
      
    }
    const icons = brandSet;
    const i18n = useI18n();
    return {
        i18n,
        icons,
        groupItems,
        cardImg
    }
  },
}
</script>

<style scoped lang="scss">
@import "~@/styles/custom";
.bg-red {
  background-image: linear-gradient(to bottom, #ffeded, #ffd8d8);
}
.bg-h {
  background-image: linear-gradient(to bottom, #fff7df, #ffeec2);
}
.bg-z {
  background-image: linear-gradient(to bottom, #f9f7f1, #f2e9d7);
}
.bg-l {
  background-image: linear-gradient(to bottom, #f3fce4, #e9f7cf);
}

.JGame-Official-Channel {
  text-align: center;
  padding: 1rem;
  .title {
    text-align: left;
    h3 {
      color: #6496e6;
    }
  }
  .bannar-body {
    display: flex;
    border-radius: 1rem;
    padding: 1rem;
    color: #fff;
    background-image: $info-btn;
    -webkit-box-shadow: $boxShadow;
    box-shadow: $boxShadow;
    font-size: 1rem;
    .body-title {
      font-size: 0.7rem;
      h3 {
        font-size: 1rem;
      }
      width: 50%;
    }
  }
  .group-item {
    -webkit-box-shadow: $boxShadow;
    box-shadow: $boxShadow;
    border-radius: 1rem;
    margin-top: 5%;
    padding: 1rem;
    .item-title {
      strong {
        font-size: 1.5rem;
      }
    }
    .item-card {
      padding: 1rem 0;

      .item-card-img-body {
        width: 9rem;
        margin: auto;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
